import React, { useEffect, useState } from 'react'
import styles from './detail.module.css'
import scc from '../../imgs/sc.png'
import { Search, Toast } from 'react-vant';
import { Button } from 'antd-mobile';
// import ej from '../../imgs/ej.png'
// import yao from '../../imgs/yao.png'
import pf from '../../imgs/pf.png'
import fk from '../../imgs/fk.png'
import cw from '../../imgs/cw.png'
import hx from '../../imgs/hx.png'
import yy from '../../imgs/yy.png'
import jt from '../../imgs/jt.png'
import eb from '../../imgs/eb.png'
import nk from '../../imgs/nk.png'
import gk from '../../imgs/gk.png'
import xn from '../../imgs/xn.png'
import ljwz from '../../imgs/ljwz_03.png'
import lb1 from '../../imgs/lb_03.png'
import lb2 from '../../imgs/lb_04.png'
// import axios from 'axios';
import { getMallContent } from '../../api/mall';
import shu from '../../imgs/shu_03.png'
import shu2 from '../../imgs/shu_05.png'
import zy1 from '../../imgs/zy1_07_03.png'
import zy2 from '../../imgs/zy1_07_05.png'
import zy3 from '../../imgs/zy1_07_07.png'
import gwcc from '../../imgs/gwcc.png'
import rjz from '../../imgs/rjz.png'
function Index() {
  const [searchValue, setSearchValue] = useState('');
  // const [list, setList] = useState([])
  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
  const [touchStartY, setTouchStartY] = useState(0)
  const [touchEndY, setTouchEndY] = useState(0)
  const [swipeProgress, setSwipeProgress] = useState(0) // 滑动进度 0-1
  const [isDragging, setIsDragging] = useState(false)
  const xuanRan = async () => {
    try {
      const res = await getMallContent({ cursor: '1', page_size: '10' })
      console.log(res)
      const { /* data, */ message, code } = res.data
      if (code === 200) {
        Toast.success(message)
        // setList(data.content_list)
      }
    } catch (err) {
      console.error('加载商城内容失败', err)
    }
  }
  useEffect(() => {
    xuanRan()
  }, [])


  // 滑动检测函数 - 触摸事件
  const handleTouchStart = (e: React.TouchEvent) => {
    setTouchStartY(e.targetTouches[0].clientY)
    setIsDragging(true)
  }

  const handleTouchMove = (e: React.TouchEvent) => {
    const currentY = e.targetTouches[0].clientY
    setTouchEndY(currentY)
    
    if (touchStartY) {
      const distance = touchStartY - currentY
      // 计算滑动进度，向上滑动为正，向下滑动为负
      const progress = Math.max(0, Math.min(1, Math.abs(distance) / 50)) // 50px为最大滑动距离
      setSwipeProgress(distance > 0 ? progress : -progress)
    }
  }

  const handleTouchEnd = () => {
    setIsDragging(false)
    if (!touchStartY || !touchEndY) return
    
    const distance = touchStartY - touchEndY
    const threshold = 25 // 滑动阈值

    console.log(`触摸滑动距离: ${distance}, 滑动进度: ${swipeProgress}`)

    // 根据滑动距离和进度决定最终状态
    if (Math.abs(distance) > threshold) {
      if (distance > 0) {
        console.log('向上滑动，展开搜索框')
        setIsDropdownOpen(true)
      } else {
        console.log('向下滑动，收起搜索框')
        setIsDropdownOpen(false)
      }
    }
    
    // 重置触摸位置和进度
    setTouchStartY(0)
    setTouchEndY(0)
    setSwipeProgress(0)
  }

  // 鼠标事件处理函数
  const handleMouseDown = (e: React.MouseEvent) => {
    setTouchStartY(e.clientY)
    setIsDragging(true)
    e.preventDefault()
  }

  const handleMouseMove = (e: React.MouseEvent) => {
    if (!isDragging) return
    
    const currentY = e.clientY
    setTouchEndY(currentY)
    
    if (touchStartY) {
      const distance = touchStartY - currentY
      // 计算滑动进度，向上滑动为正，向下滑动为负
      const progress = Math.max(0, Math.min(1, Math.abs(distance) / 50)) // 50px为最大滑动距离
      setSwipeProgress(distance > 0 ? progress : -progress)
    }
  }

  const handleMouseUp = () => {
    setIsDragging(false)
    if (!touchStartY || !touchEndY) return
    
    const distance = touchStartY - touchEndY
    const threshold = 25 // 滑动阈值

    console.log(`鼠标滑动距离: ${distance}, 滑动进度: ${swipeProgress}`)

    // 根据滑动距离和进度决定最终状态
    if (Math.abs(distance) > threshold) {
      if (distance > 0) {
        console.log('向上滑动，展开搜索框')
        setIsDropdownOpen(true)
      } else {
        console.log('向下滑动，收起搜索框')
        setIsDropdownOpen(false)
      }
    }
    
    // 重置触摸位置和进度
    setTouchStartY(0)
    setTouchEndY(0)
    setSwipeProgress(0)
  }

  return (
    <div>
      <div className={styles.gr}>
        <span className={styles.sc}>商城</span>
        <div style={{
          position: 'absolute',
          right: '10px',
          top: '10px',
          background: '#4CAF50',
          color: 'white',
          padding: '2px 8px',
          borderRadius: '4px',
          fontSize: '12px',
          zIndex: 10002
        }}>
          {swipeProgress !== 0 ? (
            `${swipeProgress > 0 ? '↑' : '↓'} ${Math.round(Math.abs(swipeProgress) * 100)}%`
          ) : (
            `状态: ${isDropdownOpen ? '展开' : '收起'}`
          )}
        </div>
        <button 
          onClick={() => {
            console.log('手动切换状态');
            setIsDropdownOpen(!isDropdownOpen);
          }}
          style={{
            position: 'absolute',
            right: '10px',
            top: '35px',
            background: '#ff6b6b',
            color: 'white',
            border: 'none',
            padding: '5px 10px',
            borderRadius: '4px',
            fontSize: '12px',
            zIndex: 10002
          }}
        >
          手动切换
        </button>
      </div>

      <div 
        className={`${styles.xm} ${isDropdownOpen ? styles.xmExpanded : ''}`}
        onTouchStart={handleTouchStart}
        onTouchMove={handleTouchMove}
        onTouchEnd={handleTouchEnd}
        onMouseDown={handleMouseDown}
        onMouseMove={handleMouseMove}
        onMouseUp={handleMouseUp}
        onMouseLeave={handleMouseUp}
      >
        <div>
          <img className={styles.scc} src={scc} alt="" />
          <div className={styles.ss} style={{ display: 'flex', flex: 1 }}>
            <div 
              className={`${styles.hp} ${isDropdownOpen ? styles.hpExpanded : ''}`}
            >
              <Search
                value={searchValue}
                onChange={setSearchValue}
                className={styles.search}
                shape='round'
                background='none'
                style={{
                  width: isDropdownOpen ? '100%' : `${90 + Math.abs(swipeProgress) * 10}%`,
                  transform: isDropdownOpen ? 'scale(1)' : `scale(${1 + Math.abs(swipeProgress) * 0.1})`,
                  transition: swipeProgress === 0 ? 'all 0.3s ease' : 'none',
                  ...({ '--rv-search-left-icon-color': '#4CAF50' } as React.CSSProperties)
                }}
                placeholder="氯雷他定片"
                clearable />
              <Button className={styles.gbs} size='small' shape='default' color='success'>
                搜索
              </Button>
              
            </div>
         <img 
           className={`${styles.rj} ${isDropdownOpen ? styles.rjHidden : ''}`} 
           src={rjz} 
           alt="" 
           style={{
             opacity: isDropdownOpen ? 0 : `${1 - Math.abs(swipeProgress)}`,
             transition: swipeProgress === 0 ? 'opacity 0.3s ease' : 'none'
           }}
         />
          </div>
        </div>
        {/* 药 */}
        <div className={styles.dfs}>
          <div className={styles.df}>
            <div>
              <dl className={styles.dl}>
                <dt><img src={pf} className={styles.pf} alt="" /></dt>
                <dd className={styles.hyao}>皮肤用药</dd>
              </dl>
            </div>
            <div>
              <dl className={styles.dl}>
                <dt><img src={fk} className={styles.pf} alt="" /></dt>
                <dd className={styles.hyao}>妇科用药</dd>
              </dl>
            </div>
            <div>
              <dl className={styles.dl}>
                <dt><img src={cw} className={styles.pf} alt="" /></dt>
                <dd className={styles.hyao}>肠胃消化</dd>
              </dl>
            </div>
            <div>
              <dl className={styles.dl}>
                <dt><img src={hx} className={styles.pf} alt="" /></dt>
                <dd className={styles.hyao}>呼吸用药</dd>
              </dl>
            </div>
            <div>
              <dl className={styles.dl}>
                <dt><img src={yy} className={styles.pf} alt="" /></dt>
                <dd className={styles.hyao}>营养补充</dd>
              </dl>
            </div>
          </div>

          <div className={styles.df}>
            <div>
              <dl className={styles.dl}>
                <dt><img src={jt} className={styles.pf} alt="" /></dt>
                <dd className={styles.hyao}>家庭常备</dd>
              </dl>
            </div>
            <div>
              <dl className={styles.dl}>
                <dt><img src={eb} className={styles.pf} alt="" /></dt>
                <dd className={styles.hyao}>耳鼻咽喉</dd>
              </dl>
            </div>
            <div>
              <dl className={styles.dl}>
                <dt><img src={nk} className={styles.pf} alt="" /></dt>
                <dd className={styles.hyao}>男科用药</dd>
              </dl>
            </div>
            <div>
              <dl className={styles.dl}>
                <dt><img src={gk} className={styles.pf} alt="" /></dt>
                <dd className={styles.hyao}>骨科疼痛</dd>
              </dl>
            </div>
            <div>
              <dl className={styles.dl}>
                <dt><img src={xn} className={styles.pf} alt="" /></dt>
                <dd className={styles.hyao}>心脑血管</dd>
              </dl>
            </div>
          </div>
        </div>
        {/* 问诊 */}
        <div>
          <img className={styles.ljws} src={ljwz} alt="" />
        </div>
        {/* 健康护肤 */}
        <div className={styles.sy}>
          <div className={styles.zb}>
            <img className={styles.lb} src={lb1} alt="" />
            {/* {
              list.length > 0 && list.map((item, index) => {
                return <div key={index}>
                  <span>{ item}</span>
                  </div>
               })
            } */}
            <img className={styles.mm} src={shu} alt="" />
          </div>
          {/* 护肤 */}
          <div className={styles.yb}>
            <img className={styles.lb} src={lb2} alt="" />
            <img className={styles.mm} src={shu2} alt="" />
            <span className={styles.rx}>热销第一</span>
            <span className={styles.rx}>热销第二</span>
          </div>

        </div>
        {/* 3张 */}
        <div className={styles.yy}>
          <div><img className={styles.zy} src={zy1} alt="" /> </div>
          <div><img className={styles.zy} src={zy2} alt="" /></div>
          <div><img className={styles.zy} src={zy3} alt="" /></div>
        </div>
        {/* 购物车 */}
        <div className={styles.gw}>
          <img src={gwcc} alt="" />
        </div>
        <div>
          111
        </div>
      </div>
    </div>
  )
}

export default Index
